<template>
    <div class="SJView">
        <div class="header">
            <span class="left-bg"></span>
            <span class="center-bg">
                <span class="sys-title animated bounce">{{sysTitle}}</span>
            </span>
            <img class="bg-line" :src="topBgLine">
            <span class="right-bg"></span>
        </div>
        <div class="content">
            <div class="static-wrap animated bounceInDown" v-loading="staticDiff.loading">
                <div class="static" :class="{'is-add':item.isAdd}" v-for="item in staticDiff.list" :key="item.id">
                    <p class="name">{{item.name}}</p>
                    <p class="info">较去年 <span class="diff">{{item.diffCount}}</span></p>
                </div>
            </div>
            <div class="chart-detail">
                <div class="chart-wrap animated bounceInLeft" v-loading="saleMonth.loading">
                    <p class="chart-title">{{saleMonth.name}}</p>
                    <p class="chart-split"></p>
                    <div class="chart-content" id="sale-month"></div>
                </div>
                <div class="chart-wrap animated bounceInDown" v-loading="staticDiff.loading">
                    <span class="center-bg"></span>
                    <span class="center-bottom-bg"></span>
                    <!--todo:public/images/02/center-static-bg.png-->

                </div>
                <div class="chart-wrap animated bounceInRight" v-loading="saleCategory.loading">
                    <p class="chart-title">{{saleCategory.name}}</p>
                    <p class="chart-split"></p>
                    <div class="chart-content" id="sale-category"></div>
                </div>
                <div class="chart-wrap animated bounceInLeft" v-loading="saleProperty.loading">
                    <p class="chart-title">{{saleProperty.name}}</p>
                    <p class="chart-split"></p>
                    <span class="pie-bg"></span>
                    <div class="chart-content" id="sale-property"></div>
                </div>
                <div class="chart-wrap animated bounceInUp" v-loading="saleProduction.loading">
                    <p class="chart-title">{{saleProduction.name}}</p>
                    <p class="chart-split"></p>
                    <div class="chart-content">
                        <el-table :data="saleProduction.list" height="100%" stripe>
                            <el-table-column prop="no" label="产品编号"/>
                            <el-table-column prop="name" label="产品名称" width="120" show-overflow-tooltip/>
                            <el-table-column prop="price" label="销售单价"/>
                            <el-table-column prop="saleCount" label="本年度销售数量"/>
                            <el-table-column prop="count" label="库存数量"/>
                            <el-table-column prop="diffCount" label="销售同比"/>
                        </el-table>
                    </div>
                </div>
                <div class="chart-wrap animated bounceInRight" v-loading="saleQuality.loading">
                    <p class="chart-title">{{saleQuality.name}}</p>
                    <p class="chart-split"></p>
                    <div class="chart-content" id="sale-quality"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import filter from "@/filter/filterForService"
    import {useRoute} from "vue-router"
    import {ref, reactive} from "vue"
    import SJViewService from "@/services/SJView.service"
    import useSJViewGraph from "@/hooks/useSJViewGraph"

    export default {
        name: "SJView",
        setup() {
            const topBgLine = filter("relativePath2Img")("02/top-bottom-bg-line.png")
            const route = useRoute()
            const sysTitle = route.query.name
            const {initBar, initCategoryChart, initPropertyChart, initQualityChart} = useSJViewGraph()

            // 查询与上年你的统计差异
            let staticDiff = reactive({
                loading: false,
                list: []
            })
            const queryStaticDiffer = () => {
                staticDiff.loading = true
                SJViewService.queryStaticDiffer().then(res => {
                    let {status, data} = res
                    if (status === 200) {
                        staticDiff.list = _.map(data, item => {
                            return {
                                ...item,
                                isAdd: item.diffCount > 0
                            }
                        })
                    }
                }).finally(() => {
                    staticDiff.loading = false
                })
            }

            // 获取销售数据按月份
            let saleMonth = reactive({
                loading: false,
                list: [],
                name: ""
            })
            const querySaleDataByMonth = () => {
                saleMonth.loading = true
                SJViewService.querySaleDataByMonth().then(res => {
                    let {status, data} = res
                    if (status === 200) {
                        let {name, list} = data
                        list = _.sortBy(list, "month")
                        saleMonth.name = name
                        saleMonth.list = list
                        initBar("sale-month", {
                            name, data: _.map(list, item => item.count),
                            xAxisData: _.map(list, item => item.month.toString())
                        })
                    }
                }).finally(() => {
                    saleMonth.loading = false
                })
            }

            // 获取商品分类
            let saleCategory = reactive({
                loading: false,
                list: [],
                name: ""
            })
            const querySaleDataByCategory = () => {
                saleCategory.loading = true
                SJViewService.querySaleDataByCategory().then(res => {
                    let {status, data} = res
                    if (status === 200) {
                        let {name, list} = data
                        saleCategory.name = name
                        saleCategory.list = list
                        initCategoryChart("sale-category", {
                            name, data: _.map(list, item => {
                                return [item.name, item.value]
                            })
                        })
                    }
                }).finally(() => {
                    saleCategory.loading = false
                })
            }

            // 获取销售属性按比例
            let saleProperty = reactive({
                loading: false,
                list: [],
                name: ""
            })
            const querySaleDataByProperty = () => {
                saleProperty.loading = true
                SJViewService.querySaleDataByProperty().then(res => {
                    let {status, data} = res
                    if (status === 200) {
                        let {name, list} = data
                        saleProperty.name = name
                        saleProperty.list = list
                        initPropertyChart("sale-property", {
                            name, data: _.map(list, item => {
                                return [item.name, item.count]
                            })
                        })
                    }
                }).finally(() => {
                    saleProperty.loading = false
                })
            }

            // 按产品销售数据分析
            let saleProduction = reactive({
                loading: false,
                list: [],
                name: ""
            })
            const querySaleDataByProduction = () => {
                saleProduction.loading = true
                SJViewService.querySaleDataByProduction().then(res => {
                    let {status, data} = res
                    if (status === 200) {
                        let {name, list} = data
                        saleProduction.name = name
                        saleProduction.list = list
                    }
                }).finally(() => {
                    saleProduction.loading = false
                })
            }

            // 按商品品质分析
            let saleQuality = reactive({
                loading: false,
                list: [],
                name: ""
            })
            const querySaleDataByQuality = () => {
                saleQuality.loading = true
                SJViewService.querySaleDataByQuality().then(res => {
                    let {status, data} = res
                    if (status === 200) {
                        let {name, list} = data
                        list = _.sortBy(list, "count")
                        saleQuality.name = name
                        saleQuality.list = list
                        initQualityChart("sale-quality", {
                            name, data: _.map(list, item => {
                                return [item.name, item.count]
                            }).reverse()
                        })
                    }
                }).finally(() => {
                    saleQuality.loading = false
                })
            }

            queryStaticDiffer()
            querySaleDataByMonth()
            querySaleDataByProperty()
            querySaleDataByCategory()
            querySaleDataByQuality()
            querySaleDataByProduction()

            return {
                topBgLine,
                sysTitle,
                staticDiff,
                saleMonth,
                saleProperty,
                saleCategory,
                saleQuality,
                saleProduction
            }
        }
    }
</script>

<style scoped lang="stylus">
    @import "~@/common/css/common.style.styl"
    .SJView
        width 100%
        height 100%
        bgImg("02/bg.png")
        background-size 100% 100%
        .header
            color #fff
            height 78px
            display flex
            position relative
            .left-bg
                width 30%
                bgImg("02/top-left-bg.png")
                background-size 100% 100%
            .center-bg
                width 40%
                bgImg("02/top-center-bg.png");
                background-size: 100% 500%;
                background-position-y: 1%;
                text-align center
                .sys-title
                    font-size: 32px;
                    color: #3bd8f9;
                    margin-top: 10px;
                    display: inline-block;
            .bg-line
                position: absolute;
                left: 30%;
                top: -16.5%;
            .right-bg
                width 30%
                bgImg("02/top-right-bg.png")
                background-size 100% 100%
        .content
            height calc(100% - 78px)
            padding 35px 15px 15px 35px
            .static-wrap
                margin-bottom 25px
                display flex
                justify-content space-between
                width 100%
                height 82px
                color #fff
                .static
                    bgImg("02/static-blue-bg.png")
                    background-size 100% 100%
                    width calc(20% - 20px)
                    padding: 10px 30px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    &.is-add
                        bgImg("02/static-green-bg.png")
                        .diff
                            color: #fff
                    .name
                        font-size 20px
                    .info
                        font-size 12px
                        color: #ddd;
                    .diff
                        font-size 14px
                        color: #f00
            .chart-detail
                height calc(100% - 107px)
                display flex
                flex-wrap: wrap
                .chart-wrap
                    background-size 100% 100%
                    height: calc(50% - 20px)
                    margin-bottom 20px
                    margin-right 20px
                    color: #fff
                    padding 25px
                    position relative
                    &:nth-child(1), &:nth-child(3), &:nth-child(4), &:nth-child(6)
                        width: calc(30% - 20px)
                        bgImg("02/box-bg.png")
                    &:nth-child(2)
                        width: calc(40% - 20px)
                    &:nth-child(5)
                        width: calc(40% - 20px)
                        bgImg("02/box-bg.png")
                    .chart-title
                        height 45px
                        line-height 45px
                        font-size: 18px;
                    .chart-content
                        height calc(100% - 45px)
                        :deep(.el-table)
                            elTable()
                    .chart-split
                        position absolute
                        left 0
                        top 70px
                        width 100%
                        height 2px
                        bgImg("02/box-top-border.png")
                        background-size 100% 100%
                    .center-bg
                        display inline-block
                        position absolute
                        left 50%
                        top 40%
                        transform translate(-50%, -50%)
                        width: 251px
                        height 332px
                        bgImg("02/center.png")
                        background-size 100% 100%
                    .center-bottom-bg
                        display inline-block
                        position absolute
                        left 50%
                        bottom 0
                        transform translateX(-50%)
                        width: 451px
                        height 207px
                        bgImg("02/center-bottom-bg.png")
                        background-size 100% 100%
                    .pie-bg
                        display inline-block
                        position absolute
                        left 50%
                        bottom 0
                        transform translateX(-50%)
                        width: 566px
                        height 130px
                        bgImg("02/pie-bottom-bg.png")
                        background-size 100% 100%
</style>